new Vue({
    el: "#root",
    data: {
        queryBySql: "/queryBySql",
        queryByStr: "/queryByStr",
        queryEnv: "/queryEnv",
        changeEnvUrl: "/changeEnv",
        sql: "",
        tableName: "",
        columnName: "*",
        where: "",
        cacheWhere:[],
        cacheSql:[],
        whereColumn: {
        },
        dataArr: [],
        flag: 0,
        env :{
            env: "",
            envList: []
        }
    },
    watch: {
        cacheWhere: function () {
            localStorage.setItem("cacheWhere", this.cacheWhere.join(","));
        },
        cacheSql: function () {
            localStorage.setItem("cacheSql", this.cacheSql.join("~"));
        }
    },
    computed: {
        fullData: function () {
            return this.tableName + "|" + this.columnName + "|" + this.where;
        }
    },
    methods: {
        changeTableName: function (name) {
            this.tableName = name;
        },
        changeColumnName: function (name) {
            this.columnName = name;
        },
        changeWhereColumn: function (name) {
            var _ = this;
            for (var i = 0; i < name.length; i++) {
                var n = name[i];
                if (!_.whereColumn.hasOwnProperty(n)) {
                    _.whereColumn[n] = "";
                }
            }
            _.where = _.whereStringify(_.whereColumn);
        },
        changeWhere: function(where){
            this.where = where;
            this.flag = 0;
        },
        changeSql: function(sql){
            this.sql = sql;
            this.flag = 0;
        },
        queryData: function () {
            var _ = this;
            _.saveWhereColumn();
            axios.get(_.queryBySql + "?sql=" + _.fullData.replaceAll(/\%/g, "%25"))
                .then(function (response) {
                    _.dataArr.unshift(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        updateData: function (index, data) {
            var _ = this;
            if (!!data) {
                _.dataArr.splice(index, 1, data);
            } else {
                _.dataArr.splice(index, 1);
            }
        },
        querySqlData: function () {
            var _ = this;
            if(_.cacheSql.indexOf(_.sql)==-1){
                _.cacheSql.unshift(_.sql);
            }
            axios.get(_.queryByStr + "?sql=" + _.sql.replaceAll(/\%/g, "%25"))
                .then(function (response) {
                    _.dataArr.unshift(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        changeEnv: function (env) {
            var _ = this;
            _.flag = 0;
            _.env.env = env;
            axios.get(_.changeEnvUrl + "?env=" + env)
                .then(function (response) {
                    _.$refs.table.loadData();
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        saveWhereColumn: function () {
            var _ = this;
            _.whereColumn = _.whereParse(_.where);
            if(_.cacheWhere.indexOf(_.where)==-1){
                _.cacheWhere.unshift(_.where);
            }
            _.flag = 0;
        },
        whereParse: function (where) {
            var whereColumn = {};
            var whereDataArr = where.split(" and ");
            for (var i = 0; i < whereDataArr.length; i++) {
                if(whereDataArr[i].indexOf(":")>-1){
                    var dataArr = whereDataArr[i].split(":");
                    whereColumn[dataArr[0]] = dataArr[1];
                }
            }
            return whereColumn;
        },
        whereStringify: function (whereColumn) {
            var temp = "";
            for (var w in whereColumn) {
                if (!!w) {
                    temp += " and " + w + ":" + whereColumn[w];
                }
            }
            return temp;
        },
        deleteWhereItem: function (index) {
            this.cacheWhere.splice(index, 1);
        },
        deleteSqlItem: function (index) {
            this.cacheSql.splice(index, 1);
        },
        closeSelect: function () {
            this.flag = 0;
        },
        updateWhere: function (value) {
            this.where += value;
            console.log(this.where);
        }
    },
    components: {
        'table-item': tableItem,
        "data-item": dataItem
    },
    beforeMount: function () {
        var _ = this;
        _.where = _.whereStringify(_.whereColumn);

        // 获取缓存数据
        var cacheWhere = localStorage.getItem("cacheWhere");
        if(!!cacheWhere){
            _.cacheWhere = cacheWhere.split(",");
        }

        var cacheSql = localStorage.getItem("cacheSql");
        if(!!cacheSql){
            _.cacheSql = cacheSql.split("~");
        }

        axios.get(_.queryEnv)
            .then(function (response) {
                _.env = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});


